<template>
  <div class="home-view">
    <div class="header">
      <div class="time">{{ currentTime }}</div>
      <div class="title">景点门票</div>
    </div>
    <div class="search-bar">
      <div class="input-container">
        <el-input placeholder="景点/目的地" v-model="searchQuery.scenicName" class="circular-input"></el-input>
        <el-button icon="el-icon-search" @click="performSearch" class="search-button"></el-button>
      </div>
      <div class="hot-search">
        <span>热搜：</span>
        <el-tag type="info" @click="handleSearch('水上乐园')">水上乐园</el-tag>
        <el-tag type="info" @click="handleSearch('欢乐谷')">欢乐谷</el-tag>
        <el-tag type="info" @click="handleSearch('度假村')">度假村</el-tag>
        <el-tag type="info" @click="handleSearch('温泉')">温泉</el-tag>
      </div>
    </div>
    <div class="banner">
      <el-carousel indicator-position="none" :interval="3000" type="slider" arrow="always">
        <el-carousel-item v-for="(item, index) in carouselImages" :key="index" @click.native="handleCarouselClick(item)">
          <img :src="item.imageUrl" alt="banner">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="filter-bar">
      <el-select v-model="selectedAllScenic" placeholder="全部景点" class="no-border-select">
        <el-option label="全部景点" value="all"></el-option>
      </el-select>
      <el-select v-model="selectedCity" placeholder="全城" class="no-border-select">
        <el-option label="全城" value="city"></el-option>
      </el-select>
      <el-select v-model="selectedSort" placeholder="智能排序" class="no-border-select" @change="performSearch">
        <el-option label="智能排序" value=""></el-option>
        <el-option label="价格升序" value="1"></el-option>
        <el-option label="价格降序" value="0"></el-option>
      </el-select>
    </div>
    <div class="scenic-list">
      <div class="scenic-item" v-for="(scenic, index) in scenicData" :key="index" @click="viewScenicDetails(scenic)">
        <img :src="scenic.coverImageUrl" alt="scenic">
        <div class="scenic-info">
          <div class="scenic-name">{{ scenic.scenicName }}</div>
          <div class="scenic-rating">
            <el-rate :value="scenic.score" readonly></el-rate>
            <span style="color: red">{{ scenic.score }}分</span>
          </div>
          <div class="scenic-distance">{{ scenic.brief }},距里{{ scenic.distance }}公里</div>
          <div class="scenic-ticket">
            <span style="color: black;">门票</span> ￥{{ scenic.priceStart }}起
            <el-button v-if="scenic.availabletoday===0" type="text" class="book-today-button">可订今日</el-button>
            <el-button v-if="scenic.availabletoday === 1" type="text" class="book-now-button">随买随用</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let url = 'http://localhost:1000/jdian';
export default {
  data() {
    return {
      searchQuery: {},
      selectedAllScenic: 'all',
      selectedCity: 'city',
      selectedSort: '',
      carouselImages: [],
      scenicData: [],
    };
  },
  computed: {
    currentTime() {
      const now = new Date();
      const hours = now.getHours();
      const minutes = now.getMinutes();
      return `${hours}:${minutes}`;
    }
  },
  methods: {
    handleSearch(keyword) {
      this.searchQuery.scenicName = keyword;  // 热搜点击赋值
      this.performSearch(); // 执行搜索操作
    },
    // 景点列表查询 景点名称查询
    getAll() {
      this.axios.get(`${url}/scenicTickets/findAll`, {params: {...this.searchQuery, sort: this.selectedSort}})
          .then(res => {
            this.scenicData = res.data.data;
            console.log(this.scenicData);
          })
          .catch(error => {
            console.error('获取景点列表失败:', error);
          });
    },
    // 景点轮播图查询
    lunbogetAll() {
      this.axios.get(`${url}/carouselImages/lunboUrl`)
          .then(res => {
            this.carouselImages = res.data.data;
            console.log(this.carouselImages);
          })
          .catch(error => {
            console.error('获取轮播图失败:', error);
          });
    },
    performSearch() {
      this.getAll();
      console.log('搜索关键词:', this.searchQuery);
    },
    // 景点详情id查询
    viewScenicDetails(scenic) {
      this.$router.push({ name: 'scenicDetail', params: { id: scenic.id } });
    },
    // 轮播图详情id查询
    handleCarouselClick(item) {
      // 假设每个图片对象都有一个 id 属性，对应景点的 ID
      this.$router.push({ name: 'ScenicDetail', params: { id: item.id } });
    }
  },
  created() {
    this.getAll();
    this.lunbogetAll();
  }
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px;
  background-color: #8fc1e6;
}

.time {
  font-size: 16px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
}

.search-bar {
  padding: 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.input-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.circular-input {
  width: 80%;
}

.circular-input.el-input__inner {
  border-radius: 50px;
  padding-right: 40px; /* 为搜索按钮留出空间 */
}

.search-button {
  margin-left: 10px; /* 搜索按钮与输入框之间的间隔 */
  background-color: #84e5e8;
  width: 100px; /* 设置固定宽度 */
}

.hot-search {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 允许换行 */
}

.hot-search span {
  margin-right: 10px; /* 热搜标签之间的间隔 */
}

.hot-search.el-tag {
  margin-right: 10px; /* 热搜标签之间的间隔 */
}

.banner {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.banner.el-carousel__item {
  width: 100%;
  height: 100%;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #fff;
}

.no-border-select.el-input__inner {
  border: none; /* 移除边框 */
  border-radius: 0; /* 移除圆角 */
}

.no-border-select.el-input__suffix {
  display: none; /* 移除下拉箭头 */
}

.no-border-select.el-input__inner:focus {
  border-color: transparent; /* 移除聚焦时的边框 */
}

.scenic-list {
  padding: 10px;
}

.scenic-item {
  display: flex;
  cursor: pointer;
  margin-bottom: 10px;
  background-color: #fff;
  padding: 10px;
}

.scenic-item img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: 10px;
}

.scenic-info {
  flex: 1;
}

.scenic-name {
  font-size: 16px;
  font-weight: bold;
}

.scenic-rating {
  display: flex;
  align-items: center;
  margin-top: 1px;
}

.scenic-distance {
  margin-top: 5px;
  margin-right: 1px;
}

.scenic-ticket {
  margin-top: 5px;
  color: red!important; /* 使用!important 强制应用样式 */
}

.scenic-ticket span {
  color: inherit;
}

.book-today-button,
.book-now-button {
  border: 1px solid #84e5e8;
  color: #00008b;
  background-color: #84e5e8;
  padding: 2px 5px;
  border-radius: 3px;
}
</style>
